<template>
    <el-table :data="tableData" stripe style="width: 96%;"
        :header-cell-style="{backgroundColor:'#f2f2f2',textAlign:'center'}" max-height="350"
        :cell-style="{textAlign:'center'}">
        <el-table-column prop="date" label="日期" />
        <el-table-column prop="value" label="数值" width="60" />
        <el-table-column prop="test" label="评估" width="60" />
        <el-table-column prop="source" label="数据来源" />
        <el-table-column label="操作">
            <template #default="scope">
                <el-button type="primary" link @click="dialogVisible = true">编辑</el-button>
                <el-button type="danger" link @click="deleteData(scope.row)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>

    <el-dialog v-model="dialogVisible" title="Tips" width="30%" :before-close="handleClose">
        <div class="popBox">
            <el-select v-model="value" class="m-2" placeholder="Select" size="large">
                <el-option label="体重" value="体重" />
                <el-option label="血糖" value="血糖" />
                <el-option label="血压" value="血压" />
                <el-option label="心率" value="心率" />
            </el-select>
            <el-date-picker v-model="value1" type="date" placeholder="Pick a day" size="large" />
            <el-input v-model="input" placeholder="Please input" />
        </div>

        <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="submit">修改</el-button>
            </span>
        </template>
    </el-dialog>
</template>
  
<script lang="ts" setup>
import { computed, ref } from 'vue'
import { useStore } from 'vuex'
import { Axios } from '@/plugins/axiosInstance';
import { ElMessage } from 'element-plus'
import { ElMessageBox } from 'element-plus'
const value = ref<string>('')
const value1 = ref<string>('')
const dialogVisible = ref(false)
const input = ref('')
const submit = () => {
    dialogVisible.value = false
    ElMessage({
        message: `${value.value}${value1.value}${input.value}修改`,
        type: 'success',
    })
}
const handleClose = (done: () => void) => {
    ElMessageBox.confirm('Are you sure to close this dialog?')
        .then(() => {
            done()
        })
        .catch(() => {
            // catch error
        })
}
const store = useStore()

type props = {
    type: string
}
const typeD = defineProps<props>()
const nowType: string = typeD.type
const readData: string = 'allHealthRecord'
let index: number = 0
if (nowType == 'weight') {
    index = 0
} else if (nowType == 'beSuger') {
    index = 1
} else if (nowType == 'afSuger') {
    index = 2
} else if (nowType == 'bs') {
    index = 3
} else if (nowType == 'hr') {
    index = 4
}
let tableData = computed(() => {
    console.log(store.state[readData][index]);

    return store.state[readData][index]
})

const deleteData = (data: any): void => {

    Axios.post('deleteData', { data: data }).then(res => {
        ElMessage({
            message: res.data,
            type: 'success',
        })
    })
}
// interface User {
//     date: string
//     value: number
//     test: string
//     source: string
// }



// const tableData: User[] = [
//     {
//         date: '2016-05-03',
//         value: 49.2,
//         test: '正常',
//         source: '用户记录'
//     },
//     {
//         date: '2016-05-03',
//         value: 49.0,
//         test: '正常',
//         source: '用户记录'
//     },
//     {
//         date: '2016-05-03',
//         value: 50.2,
//         test: '正常',
//         source: '用户记录'
//     },
//     {
//         date: '2016-05-03',
//         value: 48,
//         test: '正常',
//         source: '用户记录'
//     },
//     {
//         date: '2016-05-03',
//         value: 46.2,
//         test: '正常',
//         source: '用户记录'
//     },
//     {
//         date: '2016-05-03',
//         value: 47.2,
//         test: '正常',
//         source: '用户记录'
//     },
//     {
//         date: '2016-05-03',
//         value: 49.2,
//         test: '正常',
//         source: '用户记录'
//     },
//     {
//         date: '2016-05-03',
//         value: 48,
//         test: '正常',
//         source: '用户记录'
//     },
//     {
//         date: '2016-05-03',
//         value: 48.8,
//         test: '正常',
//         source: '用户记录'
//     },
//     {
//         date: '2016-05-03',
//         value: 48,
//         test: '正常',
//         source: '用户记录'
//     },

// ]
</script>
<style scoped lang="less">
.popBox {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    height: 160px;
    width: 60%;
    margin: auto;
}

:deep(.el-date-editor).el-input {
    width: 100%;
}
</style>
  